<template>
  <el-collapse accordion v-model="currentKey">
    <el-collapse-item
      v-for="item in editGroups"
      :key="item.text"
      :title="item.text"
      :name="item.text"
    >
      <props-table :propsData="item.props" @change="changeProps" />
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref } from "vue";
import { difference } from "lodash-es";
import PropsTable from "@/components/PropsTable/index.vue";
interface GroupProps {
  text: string;
  items: string[];
}
// 分类
const defaultEditGroups: GroupProps[] = [
  {
    text: "尺寸",
    items: [
      "height",
      "width",
      "paddingLeft",
      "paddingRight",
      "paddingTop",
      "paddingBottom",
    ],
  },
  {
    text: "边框",
    items: ["borderStyle", "borderColor", "borderWidth", "borderRadius"],
  },
  {
    text: "阴影与透明度",
    items: ["opacity", "boxShadow"],
  },
  {
    text: "位置",
    items: ["left", "top"],
  },
  {
    text: "事件功能",
    items: ["actionType", "url"],
  },
];
export default defineComponent({
  components: {
    PropsTable,
  },
  props: {
    props: {
      type: Object,
      required: true,
    },
    groups: {
      type: Array as PropType<GroupProps[]>,
      default: defaultEditGroups,
    },
  },
  setup(props, context) {
    const currentKey = ref("基本属性");
    // 组合
    let newGroups = computed(() => {
      // 所有组件通用的props
      let commonProps = defaultEditGroups.reduce((prev: any[], current: GroupProps) => {
        return [...prev, ...current.items];
      }, [] as string[]);
      // 计算每个组件特有的属性(算差集)
      const speicalProps = difference(Object.keys(props.props), commonProps);
      return [
        {
          text: "基本属性",
          items: speicalProps,
        },
        ...props.groups,
      ];
    });
    // 映射props数据
    const editGroups = computed(() => {
      return newGroups.value.map((group) => {
        const propsMap = {} as { [key: string]: any };
        group.items.forEach((item: string) => {
          propsMap[item] = props.props[item];
        });
        return {
          ...group,
          props: propsMap,
        };
      });
    });

    let changeProps = (v: any) => {
      context.emit("changeProps", v);
    };

    return {
      currentKey,
      editGroups,
      changeProps,
    };
  },
});
</script>

<style scoped></style>
